<!-- 地区选择组件 -->
<template>
  <div class="regionSelect">
    <el-select v-model="province" :size="size" placeholder="请选择省" clearable @change="provinceChange">
      <el-option v-for="item in provinceList" :key="item.code" :label="item.name" :value="item.code"/>
    </el-select>
    <el-select v-model="city" :size="size" :disabled="level === 1" placeholder="请选择市" clearable @change="cityChange">
      <el-option v-for="item in cityList" :key="item.code" :label="item.name" :value="item.code"/>
    </el-select>
    <el-select v-model="district" :size="size" :disabled="level === 1 || level === 2" placeholder="请选择区县" clearable @change="districtChange">
      <el-option v-for="item in districtList" :key="item.code" :label="item.name" :value="item.code"/>
    </el-select>
  </div>
</template>

<script setup>
  import { getRegionApi } from '../../api/api'
  import { reactive, toRefs, watch } from 'vue'

  // 定义父组件传入的值
  const props = defineProps({
    modelValue: Array,
    size: {
      type: String,
      default: 'default',
    },
    level: {
      type: Number,
      default: 3,
      required: false
    }
  })
  // 定义传值给父组件数据方法
  const emits = defineEmits(['update:modelValue'])

  // 将组件的resetData方法暴露，方便父组件可以通过ref调用
  defineExpose({resetData})

  const currentData = reactive({
    province: '',
    city: '',
    district: '',
    provinceList: [],
    cityList: [],
    districtList: []
  })
  let {province, city, district, provinceList, cityList, districtList} = toRefs(currentData)

  watch(() => props.modelValue, (newVal) => {
    init()
  }, {
    immediate: true // 立即监听
  })

  // 设置初始值
  function init() {
    if(props.modelValue.length === 0) {
      return
    }
    if(props.modelValue.length === 1) {
      currentData.province = props.modelValue[0]
      load('city', currentData.province)
      return
    }
    if(props.modelValue.length === 2) {
      load('city', props.modelValue[0])
      load('district', props.modelValue[1])
      currentData.province = props.modelValue[0]
      currentData.city = props.modelValue[1]
      return
    }
    if(props.modelValue.length === 3) {
      load('city', props.modelValue[0])
      load('district', props.modelValue[1])
      currentData.province = props.modelValue[0]
      currentData.city = props.modelValue[1]
      currentData.district = props.modelValue[2]
    }
  }

  // 获取省，市，区县数据
  async function load(level, code) {
    await getRegionApi({level: level, code: code}).then(res => {
      if(res.code === '200') {
        if(level === 'province') {
          currentData.provinceList = res.data
          init()
        } else if(level === 'city') {
          currentData.cityList = res.data
        } else {
          currentData.districtList = res.data
        }
      }
    })
  }

  load('province', '')

  // 省改变触发
  function provinceChange(e) {
    currentData.city = ''
    currentData.district = ''
    currentData.cityList = []
    currentData.districtList = []
    let chooseRegion = []
    if(e) {
      chooseRegion.push(e)
      load('city', e)
    }
    emits('update:modelValue', chooseRegion)
  }

  // 市改变触发
  function cityChange(e) {
    currentData.district = ''
    currentData.districtList = []
    let chooseRegion = [currentData.province]
    if(e) {
      chooseRegion.push(e)
      load('district', e)
    }
    emits('update:modelValue', chooseRegion)
  }

  // 区县改变触发
  function districtChange(e) {
    let chooseRegion = [currentData.province, currentData.city]
    if(e) {
      chooseRegion.push(e)
    }
    emits('update:modelValue', chooseRegion)
  }

  function resetData() {
    currentData.province = ''
    currentData.city = ''
    currentData.district = ''
    currentData.cityList = []
    currentData.districtList = []
  }
</script>

<style lang="less" scoped>
.regionSelect {
  width: 100%;
  display: flex;
  justify-content: space-between;
  .el-select{
    width: 32%;
  }
}
</style>